@extends('admin.layout.layout', ['row' => @$page])

@section('contain')
    <style>
        .my-panel .col-3{
            flex: 0 0 30%;
            width: 20%;
        }
        .panel-group {
            margin-top: 18px
        }

        .panel-group .card-panel-col {
            margin-bottom: 32px;
        }

        .panel-group .card-panel {
            height: 108px;
            cursor: pointer;
            font-size: 12px;
            position: relative;
            overflow: hidden;
            color: #666;
            background: #fff;
            -webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
            box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
            border-color: rgba(0, 0, 0, .05);
            display: block;
        }

        .panel-group .card-panel:hover .card-panel-icon-wrapper {
            color: #fff;
        }

        .panel-group .card-panel .icon-people {
            color: #40c9c6;
            color: #00b050;;
        }
        .panel-group .card-panel:hover .icon-people {
            background: #40c9c6;
            background-color: #00b050;
        }

        .panel-group .card-panel:hover .icon-message {
            background: #36a3f7
        }

        .panel-group .card-panel:hover .icon-money {
            background: #f4516c
        }

        .panel-group .card-panel:hover .icon-search {
            background: #34bfa3
        }


        .panel-group .card-panel .icon-message {
            color: #36a3f7
        }

        .panel-group .card-panel .icon-money {
            color: #f4516c
        }

        .panel-group .card-panel .icon-search {
            color: #34bfa3
        }

        .panel-group .card-panel .card-panel-icon-wrapper {
            float: left;
            margin: 14px 0 0 14px;
            padding: 16px;
            -webkit-transition: all .38s ease-out;
            transition: all .38s ease-out;
            border-radius: 6px
        }

        .panel-group .card-panel .card-panel-icon {
            float: left;
            font-size: 48px
        }

        .panel-group .card-panel .card-panel-description {
            float: right;
            font-weight: 700;
            margin: 26px;
            margin-left: 0;
            text-align: right;
        }

        .panel-group .card-panel .card-panel-description .card-panel-text {
            line-height: 18px;
            color: rgba(0, 0, 0, .45);
            font-size: 16px;
            margin-bottom: 12px
        }
        .panel-group .card-panel .card-panel-description .card-panel-subtitle {
            line-height: 18px;
            color: rgba(0, 0, 0, .45);
            font-size: 16px;
            margin-bottom: 12px
        }

        .panel-group .card-panel .card-panel-description .card-panel-num {
            font-size: 20px
        }

        @media (max-width:550px) {
            .card-panel-description {
                display: none
            }

            .card-panel-icon-wrapper {
                float: none !important;
                width: 100%;
                height: 100%;
                margin: 0 !important
            }

            .card-panel-icon-wrapper .svg-icon {
                display: block;
                margin: 14px auto !important;
                float: none !important
            }
        }

        .chart-wrapper{
            height: 400px;
            width: 500px;
            padding-top: 20px;
        }
    </style>
    <div class="container-fluid">

        <div class="my-panel">
            @foreach(@$data['panel2'] ?: [] as $title => $items)
                @empty($items)
                    <div class="col-3 my-3"></div>
                @else
                    <h5>{{ $title }}</h5>
                    <div class="row panel-group mb-4">
                        @foreach($items as $v)
                            <div class="col-3 my-3">
                                <a href="{{ @$v['url'] ?: 'javascript:void(0)' }}" class="card-panel">
                                    @if(isset($v['no']))
                                        <div class="card-panel-icon-wrapper icon-people">
                                            <i class="fa card-panel-icon {{ @$v['icon'] }}"></i>
                                        </div>
                                        <div class="card-panel-description">
                                            <div class="card-panel-text">{{ @$v['title'] }}</div>
                                            <span class="card-panel-num">{{ @$v['no'] }}</span>
                                        </div>
                                    @else
                                        <div class="card-panel-icon-wrapper icon-people">
                                            <i class="fa card-panel-icon {{ @$v['icon'] }}"></i>
                                        </div>
                                        <div class="card-panel-description">
                                            <div class="card-panel-text card-panel-subtitle">{{ @$v['title'] }}</div>
                                        </div>
                                    @endif
                                </a>
                            </div>
                        @endforeach
                    </div>
                @endif
            @endforeach
        </div>

        {{--<h2>{{ ts('daiban') }}</h2>
        <div class="row panel-group mb-4">
            @foreach(@$data['panel2'] ?: [] as $v)
                @empty($v)
                    <div class="col-3 my-3"></div>
                @else
                    <div class="col-3 my-3">
                        <a href="{{ @$v['url'] ?: 'javascript:void(0)' }}" class="card-panel">
                            <div class="card-panel-icon-wrapper icon-people">
                                <i class="fa card-panel-icon {{ @$v['icon'] }}"></i>
                            </div>
                            <div class="card-panel-description">
                                <div class="card-panel-text">{{ @$v['title'] }}</div>
                                <span class="card-panel-num">{{ @$v['no'] }}</span>
                            </div>
                        </a>
                    </div>
                @endif
            @endforeach
        </div>--}}


        {{--<h2>{{ ts('DASHBOARD') }}</h2>
        <div class="row panel-group mb-4">
            @foreach(@$data['panel'] as $v)
                @empty($v)
                    <div class="col-3"></div>
                @else
                    <div class="col-3">
                        <a href="{{ @$v['url'] ?: 'javascript:void(0)' }}" class="card-panel">
                            <div class="card-panel-icon-wrapper icon-people">
                                <i class="fa card-panel-icon {{ @$v['icon'] }}"></i>
                            </div>
                            <div class="card-panel-description">
                                <div class="card-panel-text">{{ @$v['title'] }}</div>
                                <span class="card-panel-num">{{ @$v['no'] }}</span>
                            </div>
                        </a>
                    </div>
                @endif
            @endforeach
        </div>
--}}


        @if(!empty(@$data['table']))
            <div class="mt-5">
                @foreach($data['table'] as $v)
                @endforeach
            </div>
        @endif


        <div class="container-fluid">
            <div class="row">
                <div class="col-auto">
                    <div class="chart-wrapper" id="chart1"></div>
                </div>
                <div class="col-auto">
                    <div class="chart-wrapper" id="chart2"></div>
                </div>
            </div>
        </div>

    </div>
@endsection

@section('script')
    <script>
        function changeChartsYear(ele) {
            var a = Qs.parse(location.search.replace('?', ''))
            a.year = $(ele).val()
            url = location.pathname + '?' + Qs.stringify(a)+location.hash;
            location.assign(url);
        }
    </script>

@endsection
